<script setup lang="ts">
import { ref } from "vue";
const transitionName = ref("fade");
</script>

<template>
  <div class="w-full h-full bg-white overflow-hidden">
    <router-view v-slot="{ Component, route }">
      <transition :name="transitionName">
        <keep-alive>
          <component
            class="box-border w-full m-h-[100%]"
            :is="Component"
            v-if="route?.meta?.isKeepAlive"
            :key="route.fullPath"
          />
        </keep-alive>
      </transition>

      <transition name="fade">
        <component
          class="box-border w-full m-h-[100%]"
          :is="Component"
          :key="route.fullPath"
          v-if="!route?.meta?.isKeepAlive"
        />
      </transition>
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
.fade-leave-active,
.fade-enter-active {
  transition: all 0.3s;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}

.fade-leave-to {
  display: none;
  opacity: 0;
  transform: translateX(30px);
}
</style>
